<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<image class="avatar" src="/static/uUADqqq.png" mode=""></image>
				<view class="user-details">
					<text class="user-name">{{userNameid}}</text>
					<text class="user-position">{{zhiwei}}</text>
					<text class="user-department">{{gongsi}}</text>
				</view>
				<image class="edit-icon" src="/static/ic_edit.png" mode="" @click="editProfile"></image>
			</view>

			<view class="user-stats">
				<view class="stat-item">
					<text class="stat-count">128</text>
					<text class="stat-label">联系人</text>
				</view>
				<view class="stat-item">
					<text class="stat-count">56</text>
					<text class="stat-label">待办事项</text>
				</view>
				<view class="stat-item">
					<text class="stat-count">32</text>
					<text class="stat-label">审批</text>
				</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-group">
				<view class="function-item" @click="goToSettings">
					<image class="item-icon" src="/static/ic_settings.png" mode=""></image>
					<text class="item-name">设置</text>
					<image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
				</view>
				<view class="function-item" @click="goToFavorites">
					<image class="item-icon" src="/static/ic_favorite.png" mode=""></image>
					<text class="item-name">我的收藏</text>
					<image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
				</view>
				<view class="function-item" @click="goToFiles">
					<image class="item-icon" src="/static/ic_files.png" mode=""></image>
					<text class="item-name">我的文件</text>
					<image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
				</view>
			</view>

			<view class="function-group">
				<view class="function-item" @click="goToApproval">
					<image class="item-icon" src="/static/ic_approval.png" mode=""></image>
					<text class="item-name">审批中心</text>
					<image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
				</view>
				<view class="function-item" @click="goToAttendance">
					<image class="item-icon" src="/static/ic_attendance.png" mode=""></image>
					<text class="item-name">考勤打卡</text>
					<image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
				</view>
				<view class="function-item" @click="goToCalendar">
					<image class="item-icon" src="/static/ic_calendar.png" mode=""></image>
					<text class="item-name">我的日程</text>
					<image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
				</view>
			</view>

			<view class="function-group">
				<view class="function-item" @click="goToAbout">
					<image class="item-icon" src="/static/ic_about.png" mode=""></image>
					<text class="item-name">关于我们</text>
					<image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
				</view>
				<view class="function-item" @click="goToFeedback">
					<image class="item-icon" src="/static/ic_feedback.png" mode=""></image>
					<text class="item-name">意见反馈</text>
					<image class="item-arrow" src="/static/ic_arrow_right.png" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="logout-btn" @click="logout">
			<text>退出登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '/static/avatar1.png',
					contactCount: 128,
					todoCount: 56,
					approvalCount: 32,
					userNameid: '',
					zhiwei: '',
					gongsi: ''
				}
			}
		},
		onLoad() {
			// 加载用户信息
			this.loadUserInfo();
		},
		methods: {
			loadUserInfo() {
				// 模拟从服务器获取用户信息
				// 实际项目中应该调用API获取数据
				setTimeout(() => {
					// 这里可以添加用户信息加载完成后的逻辑
				}, 300);

				// 从本地存储获取用户信息
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userNameid = userInfo.name;
					this.zhiwei = userInfo.zhiwei;
					this.gongsi = userInfo.gongsi;
					// console.log(userInfo)
				}
			},
			editProfile() {
				uni.navigateTo({
					url: '/pages/mine/profile'
				});
			},
			goToSettings() {
				uni.navigateTo({
					url: '/pages/mine/settings'
				});
			},
			goToFavorites() {
				uni.navigateTo({
					url: '/pages/mine/favorites'
				});
			},
			goToFiles() {
				uni.navigateTo({
					url: '/pages/mine/files'
				});
			},
			goToApproval() {
				uni.navigateTo({
					url: '/pages/approval/center'
				});
			},
			goToAttendance() {
				uni.navigateTo({
					url: '/pages/attendance/index'
				});
			},
			goToCalendar() {
				uni.navigateTo({
					url: '/pages/calendar/index'
				});
			},
			goToAbout() {
				uni.navigateTo({
					url: '/pages/mine/about'
				});
			},
			goToFeedback() {
				uni.navigateTo({
					url: '/pages/mine/feedback'
				});
			},
			logout() {
				uni.showModal({
					title: '确认退出',
					content: '您确定要退出当前账号吗？',
					success: (res) => {
						if (res.confirm) {
							// 执行退出登录逻辑
							uni.removeStorageSync('token');
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.user-card {
		background-color: white;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.user-position {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 4rpx;
	}

	.user-department {
		font-size: 24rpx;
		color: #999;
	}

	.edit-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.user-stats {
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-count {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 6rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
	}

	.function-list {
		background-color: white;
		margin-top: 20rpx;
	}

	.function-group {
		margin-bottom: 20rpx;
	}

	.function-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 24rpx;
	}

	.item-name {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.item-arrow {
		width: 24rpx;
		height: 24rpx;
	}

	.logout-btn {
		width: 90%;
		margin: 60rpx auto;
		height: 88rpx;
		background-color: #F53F3F;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.logout-btn text {
		font-size: 30rpx;
		color: white;
	}
</style>